<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>放大镜</title>
		<style type="text/css">
			body,html{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			#container{
				width: 900px;
				height: 550px;
				margin: 10px auto;
				position: relative;
			}
			#list{
				width: 15%;
				height: 550px;
				float: left;
			}
			#list>div{
				width: 150px;
				height: 100px;
				display: flex;
				margin-bottom: 10px;
				text-align: center;
				border: 1px solid aqua;
				overflow: hidden;
			}
			#list div img{
				width: 100%;
				background-size: 100% 100%;
				cursor: pointer;
			}
			#big{
				widows: 85%;
				height: 550px;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				float: left;
				position: relative;
				cursor: crosshair;
				overflow: hidden;
			}
			#big>img{
				width: 100%;
			}
			#filter{
				width: 150px;
				height: 150px;
				position: absolute;
				top: 0;
				right: 0;
				border: 1px aqua solid;
				overflow: hidden;
				z-index: 1000000;
			}
			#filter>img{
				width: 850px;
				position: absolute;
				left: -400px;
				top:-400px;
			}
			#cover{
				position: absolute;
				opacity: 0.5;
				background-color: blue;
				width: 150px;
				height: 150px;
				z-index: 10;
				left: 0;
				top: 0;
				border: 1px solid coral;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="list">
				<div><img src="2.jpg"/></div>
				<div><img src="3.jpg"/></div>
				<div><img src="1.jpg"/></div>
				<div><img src="5.jpg"/></div>
				<div><img src="6.jpg"/></div>
			</div>
			<div id="big">
				<img src="2.jpg" alt="" />
				<div id="cover"></div>
				<div id="filter"><img src="2.jpg" alt="" /></div>
			</div>
		</div>
	</body>
</html>
<script src="jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//	alert($("#cover").height());
	$('#cover').css("display","none");
	$('#filter').css("display","none");
	var coverWidth = 100 ;
//	$("#cover").width(coverWidth).height(coverWidth);
	var bili=$("#big img").width()/$("#filter img").width();
	$('#list img').click(function(){
		$('#big img').attr('src',$(this).attr('src'));
		$('#filter img').attr('src',$(this).attr('src'));
	});
	$('#big').mouseover(function(){
		$('#cover').css("display","block");
		$('#filter').css("display","block");
		$('#big').mousemove(function(e){
			var coverLeft = e.pageX - ($(document).width()-$("#container").width())/2-($("#list").width()+coverWidth/2);
			var coverTop=e.pageY-coverWidth/2-30;
			$('#cover').css({
				left:coverLeft-30,
				top:coverTop,
				display:'block'
			});
			$('#filter').css('display','block');
			var imgTop = ($('#big').height()-$('#big img').height())/2;
			$('#filter img').css({
				left:-coverLeft - 75 ,
				top:-(coverTop - imgTop) -60
			});
		});
	});
	$('#big').mouseout(function(){
		$('#cover').css("display","none");
		$('#filter').css("display","none");
	});
	
</script>